<template>
  <page-header-wrapper>
    <a-card :bordered='false'>
      <a-form :label-col='{span:8}' :wrapper-col='{span:16}'>
        <a-row :gutter='48'>
          <a-col :span='6'>
            <a-form-item label='用户名称'>
              <a-input v-model='queryParam.username' placeholder='请输入角色名称' />
            </a-form-item>
          </a-col>
          <a-col :span='6'/>
          <a-col :span='12'>
            <span class='table-page-search-submitButtons' :style="{ float: 'right', overflow: 'hidden' } ">
              <a-button type='primary' @click='getTableData'>查询</a-button>
              <a-button style='margin-left: 8px' @click='resetQueryParams'>重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
      <a-divider />
      <a-button type='primary' @click='AddItem'>
        新增
      </a-button>
      <a-table bordered :data-source='dataSource' :columns='columns' style='margin-top: 20px' :loading='loading'
               :rowKey='"id"'
               :pagination='{
                 current: queryParam.pageNum,
                 pageSize: queryParam.pageSize,
                 total: total,
               }'
               @change='changeTable'
      >
        <template slot='status' slot-scope='text, record'>
          <a-tag color='orange' v-if="text===1">
            启用中
          </a-tag>
          <a-tag color='gray' v-if="text===0">
            待启用
          </a-tag>
        </template>
        <template slot='operation' slot-scope='text, record'>
          <a-space>
            <a-button type='link' @click='editItem(record)'>编辑</a-button>
            <a-popconfirm title='是否要删除?' ok-text='确认' cancel-text='取消' @confirm='deleteItem(record)'>
              <a-button type='link' style='color:red'>删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </a-card>
    <a-modal :width="800" v-model="visible" :title="modalTitle" @ok="submit" @cancel='modalCancel'>
      <a-form-model
        ref="editForm"
        :model="editForm"
        :rules="editFormRules"
        :label-col="{span:6}"
        :wrapper-col="{span: 16}"
      >
        <a-form-model-item ref="id" label="用户id" prop="id" :hidden='true'>
          <a-input v-model="editForm.id" />
        </a-form-model-item>
        <a-form-model-item ref="username" label="用户名称" prop="username">
          <a-input v-model="editForm.username" placeholder='请输入角色名称'/>
        </a-form-model-item>
        <a-form-model-item ref="roleId" label="用户角色" prop="roleId">
          <a-select v-model="editForm.roleId" placeholder="请选择用户角色">
            <a-select-option v-for='item in roleOption' :value='item.id'>
              {{item.descName}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="用户状态" prop="status">
          <a-select v-model="editForm.status" placeholder="请选择用户状态">
            <a-select-option :value=1>
              启用中
            </a-select-option>
            <a-select-option :value=0>
              待启用
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { resetFormValue, setFormValue } from '@/utils/formUtils'
import { userAdd, userDeleteById, userList, userUpdateById } from '@/api/system/userManage'
import { roleList } from '@/api/system/roleManage'

const columns = [
  {
    title: '用户名称',
    dataIndex: 'username'
  },
  {
    title: '用户角色',
    dataIndex: 'roleName'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime'
  },
  {
    title: '角色状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' },
    width: '200px'
  }
]
export default {
  name: 'userManage',
  data() {
    return {
      // 查询参数
      queryParam: {
        pageSize: 10,
        pageNum: 1,
        username: undefined,
        status: undefined
      },
      columns: columns,
      dataSource: [],
      total:0,
      visible: false,
      loading: false,
      modalTitle: '新增',
      // 编辑弹窗
      editForm:{
        id:undefined,
        username:undefined,
        roleId: undefined,
        status:undefined
      },
      editFormRules:{
        username: [{ required: true, message: '请输入用户名称', trigger: 'blur' },],
        roleId: [{ required: true, message: '请选择用户角色', trigger: 'change' }],
        status: [{ required: true, message: '请选择用户状态', trigger: 'change' }],
      },
      // 角色选择框
      roleOption:[],
    }
  },
  created(){
    this.getTableData()
    this.getRoleOption()
  },
  methods: {
    getTableData() {
      console.log(this.queryParam)
      this.loading = true
      userList(this.queryParam).then((res)=>{
        console.log(res)
        this.dataSource = res?.data?.records || []
        this.total = res?.data?.total || 0
        this.loading = false
      }).catch(()=>{
        this.loading = false
      })
    },
    changeTable(pagination){
      console.log(pagination)
      this.queryParam.pageNum = pagination.current
      this.queryParam.pageSize = pagination.pageSize
      this.getTableData()
    },
    getRoleOption(){
      roleList({
        pageSize: 10,
        pageNum: 1,
      }).then(res=>{
        console.log(res)
        this.roleOption = res.data.records
      })
    },
    resetQueryParams(){
      this.queryParam = {
        pageSize: 10,
        pageNum: 1,
        name: undefined,
        status: undefined
      }
    },
    AddItem() {
      console.log('点击了新增')
      this.modalTitle = '新增'
      this.visible = true
    },
    editItem(record){
      this.modalTitle = '编辑'
      setFormValue(this.editForm,record)
      this.visible = true;
    },
    modalCancel(){
      this.visible = false
      resetFormValue(this.editForm)
    },
    deleteItem(record){
      console.log('删除数据')
      userDeleteById(record).then(res=>{
        this.$message.success('删除成功')
        this.getTableData()
      })
    },
    submit(){
      this.$refs.editForm.validate().then(()=>{
        console.log('提交表单',this.editForm)
        const api = this.editForm.id ? userUpdateById : userAdd
        api(this.editForm).then(res => {
          console.log(res)
          this.$message.success('操作成功')
          resetFormValue(this.editForm)
          this.visible = false;
          this.getTableData()
        })
      }).catch((err)=>{
        console.log(err)
      })
    },
  }
}
</script>

<style scoped>


</style>